<template>
	<view class="manage-view">
		<view class="top">
			<uni-icons style="margin-left: 25rpx;" type="left" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view class="input">全部用户</view>
		</view>

		<view class="queryInputs">
			<view class="queryInput">
				<input @blur="pageIslandUser" style="width: 100%;font-size: 28rpx;" v-model="queryInput.nickname"
					placeholder="昵称关键词" />
			</view>

			<view class="queryInput">
				<input @blur="pageIslandUser" style="width: 100%;font-size: 28rpx;" v-model="queryInput.tel"
					placeholder="手机号关键词" />
			</view>
		</view>

		<view class="querySelect">
			<picker style="width: 600rpx" mode="selector" :range="islandUserRoles" @change="changeQueryRole"
				range-key="label">
				<view class="picker-input">
					用户角色:{{ queryInput.role != null ? islandUserRoles[queryInput.role].label : '未选择角色' }}
				</view>
			</picker>
			<uni-icons v-if="queryInput.role != null" style="margin-left: 25rpx;" type="close" size="18" color="#9f9f9f"
				@click="clearRoleQueryInput"></uni-icons>
		</view>

		<view class="total-row">
			共{{queryInput.total}}条
		</view>



		<view class="content">
			<view class="participants">
				<view class="participant" style="font-weight: bold;">
					<view class="nickname">昵称</view>
					<view class="tel">电话</view>
					<view v-if="queryInput.notIn" class="score">角色</view>
					<view v-else class="score">coin</view>
					<view class="button" @click="toEditUser(user,userIndex)">操作</view>
				</view>
				<view class="participant" v-for="(user,userIndex) in userList">
					<view class="nickname">{{userIndex+1}} {{user.nickname}}</view>
					<view class="tel">{{user.tel}}</view>
					<view v-if="queryInput.notIn" class="score">{{userRoles[user.role].label}}</view>
					<view v-else class="score">{{user.hulaCoin}}</view>
					<view class="button" @click="toEditUser(user,userIndex)">{{queryInput.notIn ? '绑定' : '编辑'}}</view>
				</view>
			</view>
		</view>

		<view class="submit-button" @click="changeUserManageType()">
			{{queryInput.notIn ? '管理用户' : '新增用户' }}
		</view>


		<uni-popup ref="courseUserEdit" type="bottom">
			<view class="modal-box">
				<view class="modal-title">{{queryInput.notIn ? '新增用户' : '编辑用户' }}</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">昵称</text>
						<input type="text" disabled v-model="islandUserInput.nickname" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">角色</text>
						<picker mode="selector" :range="islandUserRoles" @change="changeInputRole" range-key="label">
							<view class="picker-input">当前选择:
								{{ islandUserInput.role != null ? islandUserRoles[islandUserInput.role].label : '未选择角色' }}
							</view>
						</picker>
					</view>
					<view v-if="!queryInput.notIn" class="modal-main-button" @click="removeUser">
						删除用户
					</view>
				</view>

				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryInput: {
					courseId: null,
					nickname: "",
					tel: "",
					role: null,
					pageNow: 1,
					pageSize: 20,
					total: 0,
					notIn: 0,
				},
				islandUserInput: {
					id: null,
					nickname: "",
					index: null,
					role: null,
				},
				islandUserRoles: [{
					value: 0,
					label: "普通用户",
				}, {
					value: 1,
					label: "候浪者"
				}, {
					value: 2,
					label: "浪者"
				}, {
					value: 3,
					label: "飓风"
				}, {
					value: 4,
					label: "封禁"
				}, ],
				userRoles: [{
					value: 0,
					label: "普通",
				}, {
					value: 1,
					label: "候浪"
				}, {
					value: 2,
					label: "浪者"
				}, {
					value: 3,
					label: "飓/暗"
				}, {
					value: 4,
					label: "系统"
				}],
				userList: []
			}
		},
		onLoad(options) {
			if (options.islandId) {
				this.queryInput.islandId = options.islandId
				this.managePageIslandUser()
			}
		},
		onReachBottom() {
			this.queryInput.pageNow++
			this.$api.managePageIslandUser(this.queryInput).then(res => {
				this.userList = [...this.userList, ...res.data.rows]
				this.queryInput.total = res.data.total
			})
		},
		methods: {
			pageIslandUser() {
				this.queryInput.pageNow = 1
				this.$api.managePageIslandUser(this.queryInput).then(res => {
					this.userList = res.data.rows
					this.queryInput.total = res.data.total
				})
			},

			toEditUser(courseUser, index) {
				this.islandUserInput.index = index
				this.islandUserInput.role = courseUser.role
				this.islandUserInput.userId = courseUser.userId
				this.islandUserInput.courseId = courseUser.courseId
				this.islandUserInput.id = courseUser.id
				this.islandUserInput.nickname = courseUser.nickname

				this.$refs.courseUserEdit.open('bottom')
			},


			changeUserManageType() {
				this.queryInput.notIn = this.queryInput.notIn == 1 ? 0 : 1
				this.pageIslandUser()
			},

			//移除用户
			removeUser() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否确定移除该用户？',
					success(res) {
						if (res.confirm) {
							// 执行请求
							that.$api.unbindIsland({
								userId: that.queryInput.userId,
								islandId: that.queryInput.islandId
							}).then(res => {
								that.userList.splice(that.islandUserInput.index, 1)
								uni.showToast({
									title: '删除成功',
									icon: '',
									duration: 500
								});
							})
						}
					}
				});


				this.closeModal();
			},
			//点击取消
			modalCancel() {
				this.closeModal();
			},
			//点击确认
			modalConfirm() {
				if (this.queryInput.notIn) {
					// 执行角色绑定请求
					this.$api.bindIslandUser({
						userId: this.islandUserInput.userId,
						islandId: this.queryInput.islandId,
						role: this.islandUserInput.role
					}).then(res => {
						this.userList.splice(this.islandUserInput.index, 1)
					})
				} else {
					// 执行角色修改请求
					this.$api.updateIslandUserRole({
						id: this.islandUserInput.id,
						role: this.islandUserInput.role
					}).then(res => {
						this.userList[this.islandUserInput.index].role = this.islandUserInput.role
					})
				}

				this.closeModal();
			},
			// 模态框关闭：统一清理动作
			closeModal() {
				this.$refs.courseUserEdit.close('bottom')
				this.islandUserInput = {
					id: null,
					nickname: "",
					index: this.islandUserInput.index,
					role: null,
				}
			},

			changeQueryRole(e) {
				this.queryInput.role = this.islandUserRoles[e.detail.value].value
				this.pageIslandUser()
			},
			
			changeInputRole(e){
				this.islandUserInput.role = this.islandUserRoles[e.detail.value].value
			},

			clearRoleQueryInput() {
				this.queryInput.role = null
				this.pageIslandUser()
			},

			toBackPage() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.manage-view {
		display: flex;
		flex-direction: column;
		padding-top: 80rpx;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			padding: 20rpx 0;

			background-color: white;
			border-bottom: solid thin #efefef;


			.input {
				width: 450rpx;
				padding-left: 30rpx;
			}


		}

		.queryInputs {
			width: 690rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.queryInput {
				width: 270rpx;
				padding: 30rpx;

				display: flex;
				flex-direction: row;
				align-items: center;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 4px 2px #f5f7f5;
			}

		}

		.querySelect {
			width: 630rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;
			padding: 30rpx;

			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 4px 2px #f5f7f5;
			font-size: 28rpx;
		}

		.total-row {
			margin-left: 30rpx;
			width: 690rpx;
			text-align: right;
			margin-top: 20rpx;
		}




		.content {

			display: flex;
			flex-direction: column;
			margin-bottom: 200rpx;

			.content-title {
				margin-left: 30rpx;
				margin-top: 30rpx;
				font-weight: bold;
			}

			.participants {
				display: flex;
				flex-direction: column;

				.participant {
					width: 630rpx;
					margin-left: 30rpx;
					margin-top: 30rpx;
					padding: 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					background-color: #FFFFFF;
					box-shadow: 0px 0px 4px 2px #f5f7f5;
					font-size: 28rpx;

					.tel {
						width: 170rpx;
					}

					.nickname {
						width: 220rpx;
						/*超过范围进行隐藏不显示*/
						overflow: hidden;
						/*文本溢出, 使用省略号 */
						text-overflow: ellipsis;
						/*连续的空白符会被合并,但文本内的换行无效*/
						white-space: nowrap;
					}

					.score {
						text-align: center;
						width: 80rpx;
					}

					.button {
						text-align: right;
						width: 60rpx;
					}

				}

			}


		}

		.submit-button {
			position: fixed;
			bottom: 30rpx;
			left: 40rpx;


			width: 670rpx;

			height: 100rpx;
			border-radius: 20rpx;
			background-color: #5DACB1;
			box-shadow: 0px 0px 4px 2px #f5f7f5;
			margin-top: 100rpx;

			text-align: center;
			line-height: 100rpx;
			color: white;
			font-weight: bold;
			letter-spacing: 5rpx;
		}

		.modal-box {
			width: 600rpx;
			margin-left: 35rpx;
			margin-bottom: 200rpx;


			padding: 40rpx;
			border-radius: 20rpx;
			background: white;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text-align: left;


			.modal-title {
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 600;
				text-align: center;
			}

			.modal-main {
				width: 100%;
				font-size: 32rpx;
				margin: 20rpx 0 40rpx;

				.modal-main-button {
					width: 600rpx;
					height: 60rpx;
					border-radius: 20rpx;
					background-color: #ff0000;
					box-shadow: 0px 0px 4px 2px #f5f7f5;
					margin-top: 20rpx;

					text-align: center;
					line-height: 60rpx;
					color: white;
					font-weight: bold;
					letter-spacing: 5rpx;
				}


				.modal-main-item {
					width: 100%;
					margin-bottom: 30rpx;

					.modal-key {
						display: block;

						font-size: 32rpx;
						margin-bottom: 10rpx;
					}

					/* 模态框单项：多选标签 */
					.modal-tags {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						min-height: 80rpx;
					}

					.modal-tag {
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						margin: 0 20rpx 10rpx 0;
						background-color: rgb(231, 240, 247);
					}

					.chosen-tag {
						background: darkorange;
					}

				}

				.modal input,
				.modal .picker-input {

					box-sizing: border-box;
					margin: 10rpx 0;
					width: 100%;
					height: 60rpx;
					border-radius: 20rpx;
					padding: 0 20rpx;
					background-color: aliceblue;

					line-height: 60rpx;
				}

			}

			.modal-operations {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-top: 20rpx;

				text-align: center;
			}

			.modal-operations>view {
				font-weight: bold;
				padding: 10rpx;
				border-radius: 4rpx;

				width: 40%;
			}

		}

		image {
			height: 100%;
			width: 100%;
		}
	}
</style>
